import React, { Component } from "react";
import Isotope from "isotope-layout";

import Cat1 from "../../assets/images/cat1.jpg";
import Cat2 from "../../assets/images/cat2.jpg";
import Cat3 from "../../assets/images/cat3.jpg";
import Dog1 from "../../assets/images/dog1.jpg";
import Dog2 from "../../assets/images/dog2.jpg";
import Dog3 from "../../assets/images/dog3.jpg";
import Yangtuo1 from "../../assets/images/yangtuo1.jpg";
import Yangtuo2 from "../../assets/images/yangtuo2.jpg";

class ShowPets extends Component {
  componentDidMount() {
    const isotope = new Isotope(".cases", {
      layoutMode: "fitRows",
      itemSelector: ".case-item",
    });
    const filterBtns = document.querySelector(".filter-btns");

    filterBtns.addEventListener("click", (e) => {
      let { target } = e;
      const filterOption = target.getAttribute("data-filter");
      if (filterOption) {
        document
          .querySelectorAll(".filter-btn.active")
          .forEach((btn) => btn.classList.remove("active"));
        target.classList.add("active");

        isotope.arrange({ filter: filterOption });
      }
    });
  }

  render() {
    return (
      <section id="showcases" className="showcases section-bg">
        <h2 className="title1">宠物展示</h2>
        <div className="filter-btns">
          <button className="filter-btn active" data-filter="*">
            全部
          </button>
          <button className="filter-btn" data-filter=".cat">
            猫猫
          </button>
          <button className="filter-btn" data-filter=".dog">
            狗狗
          </button>
          <button className="filter-btn" data-filter=".yangtuo">
            羊驼
          </button>
        </div>
        <div className="cases">
          <div className="case-item cat">
            <img src={Cat1} alt="" />
          </div>
          <div className="case-item dog">
            <img src={Dog1} alt="" />
          </div>
          <div className="case-item yangtuo">
            <img src={Yangtuo1} alt="" />
          </div>
          <div className="case-item cat">
            <img src={Cat2} alt="" />
          </div>
          <div className="case-item dog">
            <img src={Dog2} alt="" />
          </div>
          <div className="case-item yangtuo">
            <img src={Yangtuo2} alt="" />
          </div>
          <div className="case-item cat">
            <img src={Cat3} alt="" />
          </div>
          <div className="case-item dog">
            <img src={Dog3} alt="" />
          </div>
        </div>
      </section>
    );
  }
}

export default ShowPets;
